<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B站音频提取工具 - C++版本</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            padding: 30px;
            margin-top: 50px;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        h1 {
            color: #2d3748;
            margin-bottom: 10px;
            font-size: 2.5em;
        }
        
        .subtitle {
            color: #718096;
            font-size: 1.1em;
        }
        
        .input-group {
            margin-bottom: 25px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #4a5568;
        }
        
        input[type="text"], textarea {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e2e8f0;
            border-radius: 6px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        
        input[type="text"]:focus, textarea:focus {
            outline: none;
            border-color: #4299e1;
        }
        
        textarea {
            height: 120px;
            resize: vertical;
            font-family: inherit;
        }
        
        .button {
            background: #4299e1;
            color: white;
            border: none;
            padding: 14px 30px;
            font-size: 16px;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.3s;
            display: block;
            width: 100%;
            font-weight: 600;
        }
        
        .button:hover {
            background: #3182ce;
        }
        
        .button:disabled {
            background: #cbd5e0;
            cursor: not-allowed;
        }
        
        .status {
            margin-top: 20px;
            padding: 15px;
            border-radius: 6px;
            display: none;
        }
        
        .success {
            background: #c6f6d5;
            color: #22543d;
            border: 1px solid #9ae6b4;
        }
        
        .error {
            background: #fed7d7;
            color: #742a2a;
            border: 1px solid #fc8181;
        }
        
        .progress-container {
            margin-top: 20px;
            display: none;
        }
        
        .progress-bar {
            width: 100%;
            height: 20px;
            background: #e2e8f0;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #4299e1, #667eea);
            width: 0%;
            transition: width 0.3s;
        }
        
        .progress-text {
            text-align: center;
            margin-top: 10px;
            color: #4a5568;
        }
        
        .footer {
            text-align: center;
            margin-top: 30px;
            color: #718096;
            font-size: 0.9em;
        }
        
        @media (max-width: 600px) {
            .container {
                padding: 20px;
                margin-top: 20px;
            }
            
            h1 {
                font-size: 2em;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎵 B站音频提取工具</h1>
            <p class="subtitle">C++ HTTP服务器演示版本</p>
        </div>
        
        <div class="input-group">
            <label for="url">B站视频链接：</label>
            <input type="text" id="url" placeholder="请输入B站视频链接，例如：https://www.bilibili.com/video/BV1xx411c7mD">
        </div>
        
        <div class="input-group">
            <label for="title">自定义标题（可选）：</label>
            <input type="text" id="title" placeholder="例如：歌曲名称 - 歌手">
        </div>
        
        <button id="extract-btn" class="button">开始提取音频</button>
        
        <div id="status" class="status"></div>
        
        <div id="progress-container" class="progress-container">
            <div class="progress-bar">
                <div class="progress-fill"></div>
            </div>
            <div class="progress-text" id="progress-text">正在下载：0%</div>
        </div>
        
        <div class="footer">
            <p>本工具为学习项目，仅供学习交流使用</p>
            <p>Server: C++ Simple HTTP Server</p>
        </div>
    </div>
    
    <script>
        document.getElementById('extract-btn').addEventListener('click', async () => {
            const url = document.getElementById('url').value;
            const title = document.getElementById('title').value;
            const btn = document.getElementById('extract-btn');
            const status = document.getElementById('status');
            
            if (!url) {
                showMessage('请输入B站视频链接', 'error');
                return;
            }
            
            // 禁用按钮
            btn.disabled = true;
            btn.textContent = '正在处理...';
            
            try {
                const response = await fetch('/api/extract', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        url: url,
                        custom_title: title
                    })
                });
                
                const data = await response.json();
                
                if (data.success) {
                    showMessage(data.message, 'success');
                    // 模拟下载进度
                    simulateDownload();
                } else {
                    showMessage('错误: ' + (data.error || '未知错误'), 'error');
                }
            } catch (error) {
                showMessage('请求失败: ' + error.message, 'error');
            } finally {
                // 恢复按钮
                btn.disabled = false;
                btn.textContent = '开始提取音频';
            }
        });
        
        function showMessage(message, type) {
            const status = document.getElementById('status');
            status.textContent = message;
            status.className = 'status ' + type;
            status.style.display = 'block';
        }
        
        function simulateDownload() {
            const progressContainer = document.getElementById('progress-container');
            const progressFill = document.querySelector('.progress-fill');
            const progressText = document.getElementById('progress-text');
            
            progressContainer.style.display = 'block';
            progressFill.style.width = '0%';
            progressText.textContent = '正在下载：0%';
            
            let progress = 0;
            const interval = setInterval(() => {
                progress += Math.random() * 10;
                if (progress >= 100) {
                    progress = 100;
                    clearInterval(interval);
                    progressText.textContent = '下载完成！';
                    
                    // 显示下载链接
                    setTimeout(() => {
                        showMessage('音频下载完成！即将开始下载文件...', 'success');
                        setTimeout(() => {
                            window.location.href = '/download';
                        }, 1000);
                    }, 1000);
                } else {
                    progressFill.style.width = progress + '%';
                    progressText.textContent = '正在下载：' + Math.round(progress) + '%';
                }
            }, 200);
        }
        
        // 测试服务器连接
        window.addEventListener('load', async () => {
            try {
                const response = await fetch('/api/test');
                const data = await response.json();
                console.log('服务器状态:', data);
            } catch (error) {
                console.warn('服务器连接测试失败');
            }
        });
    </script>
</body>
</html>